<script setup>
import { reactive, ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import router from '../../router/router'
import { useStore } from 'vuex'

const labelPositon = 'left'
const formLabelAligin = ref({
  username: '20154084',
  password: '123456'
})
const resdata = ref([])
const loginform = ref(null)
const store = useStore()

// 定义校验规则
const rules = reactive({
  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
})

const login = () => {
  // 进行提交前的校验
  loginform.value.validate((valid) => {
    if (valid) {
      console.log(formLabelAligin)
      axios.post('api/login', {
        username: formLabelAligin.value.username,
        password: formLabelAligin.value.password
      }).then((res) => {
        console.log(res.data)
        resdata.value = res.data.data
        if (resdata.value != null) {
          switch (resdata.value.role) {
            case '0': // 管理员
              console.log('接受数据')
              router.push('/index')
              // store.dispatch('userStore/saveUserInfoAction', res)
              // this.$cookies.set('cname', res.data.adminName)
              // this.$cookies.set('cid', res.data.adminId)
              // this.$cookies.set('role', 0)
              // this.$router.push({ path: '/index' }) // 跳转到首页
              break
            case '1': // 教师
              router.push('/index')
              store.dispatch('teacherStore/saveTeacherInfoAction', res)
              console.log('存储数据')
              // store.dispatch('userStore/saveUserInfoAction', res)
              // this.$cookies.set('cname', res.data.teacherName)
              // this.$cookies.set('cid', res.data.teacherId)
              // this.$cookies.set('role', 1)
              // this.$router.push({ path: '/index' }) // 跳转到教师用户
              break
            case '2': // 学生
              // router.push('/student')
              // this.$cookies.set('cname', res.data.studentName)
              // this.$cookies.set('cid', res.data.studentId)
              router.push('/student')
              store.dispatch('userStore/saveUserInfoAction', res)
              console.log('存储数据')
              break
          }
          // store.dispatch('userStore/saveUserInfoAction', res)
        }
        if (resdata.value == null) {
          ElMessage.error('登录失败，用户名或者密码错误')
        }
      })
    }
  })
}

</script>

<template>
<div id="login">
<div class="bg"></div>
<el-row class="main-container">
  <el-col :lg="8" :xs="16" :span="10">
    <div class="top">
      <el-icon><Reading /></el-icon><span class="title">在线考试系统</span>
    </div>

    <div class="box"></div>
    <div class="bottom">
      <div class="container">
        <p class="title">账号登录</p>
        <el-form :label-position="labelPositon" lable-width="80px" :model="formLabelAligin" :rules="rules" status-icon ref="loginform">
        <el-form-item label="用户">
          <el-input v-model="formLabelAligin.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="formLabelAligin.password" placeholder="请输入密码" type="password"></el-input>
        </el-form-item>
        <div class="sumbit">
          <el-button type="primary" class="row-login" @click="login()">登录</el-button>
        </div>
        <!-- <div class="options">
                <p class="find"><a href="javascript:;">找回密码</a></p>
                <div class="register">
                  <span>没有账号?</span>
                  <span><a href="javascript:;">去注册</a></span>
                </div>
              </div> -->
        </el-form>
      </div>
    </div>
  </el-col>
</el-row>
 <section class="remind">
      <span>学生账号：20154084</span>
      <span>管理员账号：9527</span>
      <span>教师账号：20081001</span>
      <span>密码都是：123456</span>
    </section>
</div>

</template>

<style scoped>
.top .el-icon{

  font-size: 50px;
}
.box{
  padding-bottom: 100px;
}
.remind {
  border-radius: 4px;
  padding: 10px 20px;
  display: flex;
  position: fixed;
  right: 20px;
  bottom: 50%;
  flex-direction: column;
  color: #606266;
  background-color: #fff;
  border-left: 4px solid #409eff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.container {
  margin-bottom: 32px;
}
.container .el-radio-group {
  margin: 30px 0px;
}
a:link {
  color:#ff962a;
  text-decoration:none;
}
#login {
  font-size: 14px;
  color: #000;
  background-color: #fff;
}
#login .bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow-y: auto;
  height: 100%;
  background: url('../../assets/img/loginbg.png')center top / cover no-repeat;
  background-color: #b6bccdd1 !important;
}
#login .main-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
#login .main-container .top {
  margin-top: 100px;
  font-size: 30px;
  color: #ff962a;
  display: flex;
  justify-content: center;
}

#login .top .title {
  margin-top: 20px;
}
#login .bottom {
  display:flex;
  justify-content: center;
  background-color:#fff;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#login .bottom .title {
  text-align: center;
  font-size: 30px;
}
.bottom .container .title {
  margin: 30px 0px;;
}
.bottom .submit .row-login {
  width: 100%;
  background-color: #04468b;
  border-color: #04468b;
  margin: 20px 0px 10px 0px;
  padding: 15px 20px;
}
.bottom .submit {
  display: flex;
  justify-content: center;
}
.footer {
  margin-top: 50px;
  text-align: center;
}
.footer .msg1 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 15px;
}
.footer .msg2 {
  font-size: 14px;
  color: #e3e3e3;
  margin-top: 70px;
}
.bottom .options {
  margin-bottom: 40px;
  color: #ff962a;
  display: flex;
  justify-content: space-between;
}
.bottom .options > a {
  color: #ff962a;
}
.bottom .options .register span:nth-child(1) {
  color: #8C8C8C;
}
</style>
